{% extends "base_generic.html" %}
{% load static %}

{% block content %}
<style>
  .hero-section {
    background-size: cover;
    background-position: center;
    color: white;
    padding: 5rem 0;
    margin-bottom: 3rem;
    border-radius: 0.5rem;
  }
  .stat-card {
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
  .btn-custom {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    border-radius: 50px;
    margin: 0 1rem;
    transition: all 0.3s;
  }
  .btn-primary {
    background-color: #3a86ff;
    border-color: #3a86ff;
  }
  .btn-secondary {
    background-color: #8338ec;
    border-color: #8338ec;
  }
  .footer {
    background-color: #f8f9fa;
    padding: 2rem 0;
    margin-top: 3rem;
    border-top: 1px solid #eee;
  }
</style>

<div class="container">
  <div class="hero-section text-center" style="background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url({% static 'images/library-bg.jpg' %});">
    <h1 class="display-3 fw-bold mb-4">图书管理系统</h1>
    <p class="lead mb-5">专业、高效、安全的图书馆管理解决方案</p>
    <div class="d-flex justify-content-center">
      <a href="{% url 'books' %}" class="btn btn-primary btn-custom">
        <i class="fas fa-book me-2"></i>浏览图书
      </a>
      <a href="{% url 'authors' %}" class="btn btn-secondary btn-custom">
        <i class="fas fa-user-edit me-2"></i>浏览作者
      </a>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-md-3">
      <div class="stat-card card text-white bg-primary">
        <div class="card-body text-center">
          <h5 class="card-title">图书总数</h5>
          <p class="card-text display-3">{{ num_books }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stat-card card text-white bg-success">
        <div class="card-body text-center">
          <h5 class="card-title">可借副本</h5>
          <p class="card-text display-3">{{ num_instances_available }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stat-card card text-white bg-warning">
        <div class="card-body text-center">
          <h5 class="card-title">作者数量</h5>
          <p class="card-text display-3">{{ num_authors }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stat-card card text-white bg-info">
        <div class="card-body text-center">
          <h5 class="card-title">访问次数</h5>
          <p class="card-text display-3">{{ num_visits }}</p>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-5">
    <div class="col-md-12">
      <div class="card shadow-sm">
        <div class="card-header bg-white">
          <h4 class="mb-0">系统简介</h4>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <h5><i class="fas fa-check-circle text-primary me-2"></i>功能全面</h5>
              <p>提供图书录入、借阅管理、读者服务等完整功能</p>
              
              <h5 class="mt-4"><i class="fas fa-shield-alt text-success me-2"></i>安全可靠</h5>
              <p>采用多重安全机制，保障数据安全</p>
            </div>
            <div class="col-md-6">
              <h5><i class="fas fa-bolt text-warning me-2"></i>高效便捷</h5>
              <p>优化的工作流程，大幅提升工作效率</p>
              
              <h5 class="mt-4"><i class="fas fa-mobile-alt text-info me-2"></i>响应式设计</h5>
              <p>完美适配各种设备屏幕</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="footer text-center">
    <p class="text-muted">© 2025 图书管理系统 - 版本 1.0.0</p>
  </div>
</div>

<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
{% endblock %}
